<template>
  <scroll-view
    class="scroll-view"
    scroll-y
    :scroll-into-view="scrollIntoView"
    @scrolltolower="loadMore"
  >
    <!-- 职位列表 -->
    <view class="position-list">
      <!-- 职位卡片 -->
      <view
        class="position-card"
        v-for="(position, index) in collectedPositions"
        :key="index"
        :id="'item-' + index"
      >
        <!-- 职位名称与薪资 -->
        <view class="position-card__header">
          <text class="position-card__title">{{ position.positionName }}</text>
          <text class="position-card__salary">{{ position.salary }}</text>
        </view>

        <!-- 公司名称 -->
        <text class="position-card__company">{{ position.companyName }}</text>

        <!-- HR信息与沟通按钮 -->
        <view class="position-card__footer">
          <view class="position-card__hr">
            <image :src="position.hrAvatarUrl" class="position-card__hr-avatar"></image>
            <text class="position-card__hr-name">{{ position.respPerson }} · {{ position.respPos }}</text>
          </view>
          <view class="action-buttons">
            <!-- 根据状态显示不同的标签 -->
            <view class="status-btn" v-if="position.status === 0">未处理</view>
            <view class="status-btn" v-else-if="position.status === 1">待面试</view>
            <view class="status-btn" v-else-if="position.status === 2">已拒绝</view>
            <view class="status-btn" v-else-if="position.status === 3">面试通过</view>
            <view class="status-btn" v-else-if="position.status === 4">面试未通过</view>
            <view class="status-btn" v-else-if="position.status === 5">邀请投递简历</view>
            <view class="status-btn" v-else-if="position.status === 6">拒绝投递简历</view>
            <view class="status-btn" v-else-if="position.status === 7">已投递简历</view>
            <view class="status-btn" v-else>未知</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 加载完成提示 -->
    <view class="load-complete" v-if="isLoadComplete">已加载全部</view>
  </scroll-view>
</template>

<script>
import { getresumeSubmit } from "@/api/userInformation.js";

export default {
  data() {
    return {
      collectedPositions: [], // 职位列表
      pageNum: 1,
      pageSize: 10,
      isLoadComplete: false, // 是否加载完成
      scrollIntoView: "" // 用于滚动到指定位置
    };
  },
  methods: {
    async queryJobInformation() {
      const res = await getresumeSubmit(this.pageNum, this.pageSize);
      if (res.code === 200) {
        if (res.data.list && res.data.list.length > 0) {
          this.collectedPositions = [...this.collectedPositions, ...res.data.list];
          // 如果返回的数据少于pageSize，说明已经加载完成
          if (res.data.list.length < this.pageSize) {
            this.isLoadComplete = true;
          }
        } else {
          // 如果返回的数据为空，说明已经加载完成
          this.isLoadComplete = true;
        }
      } else {
        uni.showToast({
          title: '查询失败',
          icon: 'none'
        });
      }
    },
    loadMore() {
      if (!this.isLoadComplete) {
        this.pageNum += 1; // 页码+1
        console.log(`页码递增为：${this.pageNum}`);
        this.queryJobInformation(); // 加载更多
      }
    }
  },
  mounted() {
    this.queryJobInformation();
  }
};
</script>

<style scoped>
.scroll-view {
  height: 100vh;
}

.position-collection {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.position-list {
  padding: 15rpx;
}

.position-card {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 15rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.position-card__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 20rpx;
}

.position-card__title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
}

.position-card__salary {
  font-size: 30rpx;
  color: #0084ff;
}

.position-card__company {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 25rpx;
}

.position-card__tags {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 25rpx;
  margin-top: 25rpx;
}

.position-card__tag {
  background-color: #f5f5f5;
  color: #999;
  font-size: 24rpx;
  padding: 8rpx 15rpx;
  border-radius: 6rpx;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
}

.position-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.action-buttons {
  display: flex;
  gap: 15rpx;
  margin-left: 15rpx;
}

.position-card__hr {
  display: flex;
  align-items: center;
  margin-right: auto;
}

.position-card__hr-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin-right: 10rpx;
}

.position-card__hr-name {
  font-size: 24rpx;
  color: #666;
}

.status-btn {
  width: 130rpx;
  height: 70rpx;
  background-color: #b6ccd8;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 15rpx;
  font-size: 30rpx;
}

.status-btn__text {
  color: #fff;
  font-size: 15rpx;
  font-weight: 500;
}

/* 加载完成提示样式 */
.load-complete {
  text-align: center;
  font-size: 24rpx;
  color: #999;
  padding: 20rpx;
}
</style>